import { createGlobalThemeContract, globalStyle, assignVars, style } from '@vanilla-extract/css';

export const MEDIA_MAX_WIDTH = '(max-width: 450px)'; // max-device-width
export const MEDIA_DARK = '(prefers-color-scheme: dark)';
export const MEDIA_MOBILE = '(pointer:coarse)';

export const Z_INDEX = {
	MASK: 10000,
	DIALOG: 20000,
	POPUP: 30000,
	DRAG_MASK: 40000,
	TOAST: 100000,
};

export const vars = createGlobalThemeContract(
	{
		color: {
			brand: null,
			brandDark: null,
			brandLight: null,
			brandBackground: null,
			success: null,
			successDark: null,
			successLight: null,
			successBackground: null,
			danger: null,
			dangerDark: null,
			dangerLight: null,
			dangerBackground: null,
			warning: null,
			warningDark: null,
			warningLight: null,
			warningBackground: null,
			info: null,
			infoDark: null,
			infoLight: null,
			infoBackground: null,
			activeFocus: null,
			activeBlur: null,
			buttonText: null,
			primaryText: null,
			regularText: null,
			secondaryText: null,
			placeholderText: null,
			disabledText: null,
			border: null,
			darkBorder: null,
			lightBorder: null,
			fill: null,
			darkFill: null,
			lightFill: null,
			disableBackground: null,
			pageBackground: null,
			baseBackground: null,
			activeBackground: null,
			workspaceBackground: null,
			toastBackground: null,
			toastText: null,
			shadow: null,
			mask: null,
			white: null,
			black: null,
			menuBackStart: null,
			menuBackStop: null,
			menuHover: null,
			menuSelected: null,
			menuSelectedHover: null,
		},
		empty: {
			color: {
				0: null,
				1: null,
				2: null,
				3: null,
				4: null,
			},
		},
		font: {
			family: null,
			baseSize: null,
		},
		layout: {
			smallRadius: null,
			middleRadius: null,
			largeRadius: null,
			inputHeight: null,
		},
	},
	(_value, path) => `tui-${path.join('-')}`.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`)
);

const LIGHT_COLOR = {
	brand: '#409EFF',
	brandDark: '#337ecc',
	brandLight: '#a0cfff',
	brandBackground: '#d9ecff',
	success: '#67C23A',
	successDark: '#529b2e',
	successLight: '#b3e19d',
	successBackground: '#e1f3d8',
	danger: '#F56C6C',
	dangerDark: '#c45656',
	dangerLight: '#fab6b6',
	dangerBackground: '#fde2e2',
	warning: '#E6A23C',
	warningDark: '#b88230',
	warningLight: '#f3d19e',
	warningBackground: '#faecd8',
	info: '#909399',
	infoDark: '#73767a',
	infoLight: '#c8c9cc',
	infoBackground: '#e9e9eb',
	activeFocus: '#409EFF50',
	activeBlur: '#cccccc50',
	buttonText: '#ffffff',
	primaryText: '#050505',
	regularText: '#333',
	secondaryText: '#909399',
	placeholderText: '#A8ABB2',
	disabledText: '#C8CACF',
	border: '#dbdde0',
	darkBorder: '#c4c4c4',
	lightBorder: '#EcEcEc',
	fill: '#F0F2F5',
	darkFill: '#EBEDF0',
	lightFill: '#F5F7FA',
	disableBackground: '#e0e0e0',
	pageBackground: '#F5F5F5',
	baseBackground: '#FFFFFF',
	activeBackground: '#eee',
	workspaceBackground: '#F1F2F3',
	toastBackground: '#000',
	toastText: '#C0C4CC',
	shadow: '#0002',
	mask: '#0007',
	white: '#fff',
	black: '#000',
	menuBackStart: '#2671bf',
	menuBackStop: '#56a1ef',
	menuHover: '#cccccc20',
	menuSelected: '#ffffff50',
	menuSelectedHover: '#ffffff50',
};

const LIGHT_EMPTY_COLOR = {
	0: '#FFFFFF',
	1: '#D5DAE5',
	2: '#DCDEE0',
	3: '#EAEDF1',
	4: '#F7F8FA',
};

const DARK_COLOR = {
	brand: '#409EFF',
	brandDark: '#66b1ff',
	brandLight: '#2a598a',
	brandBackground: '#1d3043',
	success: '#67C23A',
	successDark: '#85ce61',
	successLight: '#3e6b27',
	successBackground: '#25371c',
	danger: '#F56C6C',
	dangerDark: '#f78989',
	dangerLight: '#854040',
	dangerBackground: '#412626',
	warning: '#E6A23C',
	warningDark: '#ebb563',
	warningLight: '#7d5b28',
	warningBackground: '#3e301c',
	info: '#909399',
	infoDark: '#a6a9ad',
	infoLight: '#525457',
	infoBackground: '#2d2d2f',
	activeFocus: '#409EFF50',
	activeBlur: '#33333350',
	buttonText: '#ffffff',
	primaryText: '#f0f0f0',
	regularText: '#b0b0b0',
	secondaryText: '#707378',
	placeholderText: '#8D9095',
	disabledText: '#4C4E52',
	border: '#333435',
	darkBorder: '#484848',
	lightBorder: '#121212',
	fill: '#303030',
	darkFill: '#39393A',
	lightFill: '#262727',
	disableBackground: '#303030',
	pageBackground: '#181818', // '#161616',
	baseBackground: '#000', // '#111111',
	activeBackground: '#111',
	workspaceBackground: '#252525',
	toastBackground: '#555',
	toastText: '#fff',
	shadow: '#333c',
	mask: '#222a',
	white: '#fff',
	black: '#000',
	// menuBackStart: '#2671bf',
	// menuBackStop: '#56a1ef',
	// menuHover: '#cccccc20',
	// menuSelected: '#ffffff50',
	// menuSelectedHover: '#ffffff50',
	menuBackStart: '#111',
	menuBackStop: '#000',
	menuHover: '#cccccc20',
	menuSelected: '#ffffff30',
	menuSelectedHover: '#ffffff30',

};

const DARK_EMPTY_COLOR = {
	0: '#000',
	1: '#333',
	2: '#222',
	3: '#151515',
	4: '#333',
};

globalStyle(':root', {
	vars: assignVars(vars, {
		color: LIGHT_COLOR,
		font: {
			family: 'Microsoft YaHei',
			baseSize: '0.875em',
		},
		empty: {
			color: LIGHT_EMPTY_COLOR,
		},
		layout: {
			smallRadius: '4px',
			middleRadius: '8px',
			largeRadius: '16px',
			inputHeight: '2.6em',
		},
	}),
	color: vars.color.regularText,
	backgroundColor: vars.color.pageBackground,
	fontSize: vars.font.baseSize,
	'@media': {
		[MEDIA_DARK]: {
			vars: {
				...assignVars(vars.color, DARK_COLOR),
				...assignVars(vars.empty.color, DARK_EMPTY_COLOR),
			},
		},
	},
	fill: vars.color.regularText,
});

globalStyle(':root[light]', {
	vars: {
		...assignVars(vars.color, LIGHT_COLOR),
		...assignVars(vars.empty.color, LIGHT_EMPTY_COLOR),
	},
	'@media': {
		[MEDIA_DARK]: {
			vars: {
				...assignVars(vars.color, LIGHT_COLOR),
				...assignVars(vars.empty.color, LIGHT_EMPTY_COLOR),
			},
		},
	},
});

globalStyle(':root[dark]', {
	vars: {
		...assignVars(vars.color, DARK_COLOR),
		...assignVars(vars.empty.color, DARK_EMPTY_COLOR),
	},
	'@media': {
		[MEDIA_DARK]: {
			vars: {
				...assignVars(vars.color, DARK_COLOR),
				...assignVars(vars.empty.color, DARK_EMPTY_COLOR),
			},
		},
	},
});

export const lightTheme = style({
	vars: {
		...assignVars(vars.color, LIGHT_COLOR),
		...assignVars(vars.empty.color, LIGHT_EMPTY_COLOR),
	},
	'@media': {
		[MEDIA_DARK]: {
			vars: {
				...assignVars(vars.color, LIGHT_COLOR),
				...assignVars(vars.empty.color, LIGHT_EMPTY_COLOR),
			},
		},
	},
});

export const darkTheme = style({
	vars: {
		...assignVars(vars.color, DARK_COLOR),
		...assignVars(vars.empty.color, DARK_EMPTY_COLOR),
	},
	'@media': {
		[MEDIA_DARK]: {
			vars: {
				...assignVars(vars.color, DARK_COLOR),
				...assignVars(vars.empty.color, DARK_EMPTY_COLOR),
			},
		},
	},
});

export const iconStyle = style({
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
});

const SCROLL_BAR_WIDTH = '4px';

globalStyle('*', {
	scrollbarWidth: 'thin',
	boxSizing: 'border-box',
	fontFamily: vars.font.family,
	'@media': {
		[MEDIA_MAX_WIDTH]: {
			scrollbarWidth: 'none',
		},
	},
});

globalStyle('*::-webkit-scrollbar', {
	backgroundColor: vars.color.border,
	width: SCROLL_BAR_WIDTH,
	height: SCROLL_BAR_WIDTH,
	'@media': {
		[MEDIA_MAX_WIDTH]: {
			width: 0,
		},
	},
});

globalStyle('*::-webkit-scrollbar-thumb', {
	backgroundColor: vars.color.secondaryText,
	borderRadius: SCROLL_BAR_WIDTH,
});

globalStyle('*::-webkit-scrollbar-corner', {
	backgroundColor: vars.color.border,
});

export const hideScrollBar = style({
	'::-webkit-scrollbar': {
		display: 'none',
	},
	scrollbarWidth: 'none',
});

export const autoHideScrollBar = style({
	scrollbarWidth: 'thin',
	//scrollbarGutter: 'stable',
	padding: '0 -6px',
	selectors: {
		'&:not(:hover)': {
			scrollbarWidth: 'none',
		},
	},
});

globalStyle(`${autoHideScrollBar}::-webkit-scrollbar`, {
	background: 'transparent',
});

globalStyle(`${autoHideScrollBar}:hover::-webkit-scrollbar`, {
	backgroundColor: '#00000020',
});

globalStyle(`${autoHideScrollBar}::-webkit-scrollbar-thumb`, {
	// backgroundColor: vars.color.disableBackground,
	background: 'transparent',
});
globalStyle(`${autoHideScrollBar}:hover::-webkit-scrollbar-thumb`, {
	backgroundColor: vars.color.secondaryText,
	// background: '#88888860',
});

globalStyle('h1', {
	fontSize: '3rem',
});
globalStyle('h2', {
	fontSize: '2rem',
});
globalStyle('h3', {
	fontSize: '1.5rem',
});
globalStyle('h4', {
	fontSize: '1.2rem',
});
globalStyle('h5', {
	fontSize: '1rem',
});
globalStyle('input[disabled]', {
	color: vars.color.disabledText,
});

globalStyle('hr', {
	border: 'none',
	borderBottom: `1px solid ${vars.color.border}`,
	width: '100%',
});

globalStyle('hr.dotted', {
	borderBottom: `2px dotted ${vars.color.border}`,
});

globalStyle('hr.dashed', {
	borderBottom: `2px dashed ${vars.color.border}`,
});

globalStyle('hr.double', {
	borderBottom: `3px double ${vars.color.border}`,
});

export const borderStyle = style({
	border: `1px solid ${vars.color.border}`,
});
